import React from 'react'
import { Collapse } from 'antd'

import { useCountries } from '@oBiz/hooks/SWRApi/useCountries'
import { useTimeZoneList } from '@oBiz/hooks/SWRApi/useTimeZone'
import type { IStore } from '../../../store'
import { useBoundStore } from '../../../store'
import { EventItem } from './EventItem'
import { Label } from './Label'
import styles from './styles.module.less'

export const AddEvent = () => {
  const countriesRes = useCountries()
  const timeZoneRes = useTimeZoneList()
  const waybillList = useBoundStore((state: IStore) => state.waybillList)

  return (
    <React.Fragment>
      {waybillList.map((item, index) => {
        return (
          <div key={index} className={styles.headerScope}>
            <Collapse
              key={index}
              className={styles.eventCollapse}
              collapsible="header"
              expandIconPosition="end"
              items={[
                {
                  key: index,
                  forceRender: true,
                  label: <Label item={item} />,
                  children: (
                    <EventItem
                      waybillNo={item.waybillNo}
                      itemKey={index}
                      countriesRes={countriesRes}
                      timeZoneRes={timeZoneRes}
                    />
                  ),
                },
              ]}
            />
          </div>
        )
      })}
    </React.Fragment>
  )
}
